<template>
  <div>
    <el-button type="primary" @click="addAcquisition">新增</el-button>
    <el-table :data="tableData" style="height: calc(100vh - 250px)">
      <el-table-column prop="id" label="ID" width="100"/>
      <el-table-column prop="code" label="code" />
      <el-table-column prop="name" label="采集类型名称" />
      <el-table-column prop="date" label="外部导入" align="center">
        <template #default="scope">
          <el-switch
            :width="58"
            v-model="scope.row.outside"
            :active-value="true"
            :inactive-value="false"
            active-text="是"
            inactive-text="否"
            :loading="switchStatus"
            disabled
            inline-prompt
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" >
      <template #default="scope">
          <el-tooltip effect="dark" placement="top-start">
            <template #content>
               <div style="max-width: 500px;">
                {{ scope.row.description }}
              </div>
            </template>
            <el-text line-clamp="2">
              {{ scope.row.description }}
            </el-text>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEditor(scope.row)"
            >编辑</el-button
          >
          <!-- <el-button link type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      :total="total"
      :limit="searchFrom.pageSize"
      :page="searchFrom.pageNum"
      @pagination="handlePageChange"
    ></Pagination>
    <el-dialog
      v-model="dialogVisible"
      :title="newTitle"
      width="650"
      :before-close="handelCancel"
    >
      <el-form
        :model="acquisitionParams"
        ref="acquisitionForm"
       label-width="auto"
        :rules="acquisitionRules"
      >
        <el-form-item label="类型code" prop="code" required>
          <el-input v-model.trim="acquisitionParams.code" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="类型名称" prop="name" required>
            <el-input v-model.trim="acquisitionParams.name" placeholder="请输入"  />
        </el-form-item>
        <el-form-item label="外部导入" prop="outside">
          <el-switch
            v-model="acquisitionParams.outside"
            :active-value="true"
            :inactive-value="false"
            active-text="是"
            inactive-text="否"
            inline-prompt
          />
        </el-form-item>
        <el-form-item label="类型描述" prop="description">
          <el-input
            v-model.trim="acquisitionParams.description"
            show-word-limit
            type="textarea"
            maxlength="300"
            placeholder="请输入"
            rows="9"
            resize="none"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handelCancel">取消</el-button>
        <el-button type="primary" @click="handelSure(acquisitionForm)">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const searchFrom = ref({
  pageNum: 1,
  pageSize: 10,
});
const acquisitionForm = ref("");
// 新增参数(赋值参数)
const acquisitionParams = ref({
  code: "",
  name: "",
  outside: true,
  description: "",
});
// 参数校验规则
const acquisitionRules = ref({
  code: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: "只能输入英文和数字",
      trigger: "blur",
    },
  ],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
});
const total = ref(0);
const switchStatus = ref(false); // 表格状态
const publicFrom = ref({}); //公共赋值对象
const dialogVisible = ref(false); //是否开启
const newTitle = ref(""); //名称
const tableData = ref([{ switch: true }]);
// 分页
const handlePageChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
onMounted(() => {
  getList();
});
// 获取列表
const getList = () => {
  product.collectiontype
    .collectiontypeList({
      data: searchFrom.value,
    })
    .then((res) => {
      console.log(res);
      tableData.value = res.data;
      total.value = res.total;
      console.log(res, "数据");
    });
};
// 编辑
const handleEditor = (rowItem) => {
  console.log(rowItem.id, "编辑");
  publicFrom.value = rowItem;
  dialogVisible.value = true;
  newTitle.value = "编辑类型";

  product.collectiontype
    .collectiontypeGetbyid({
      pathParams: {
        id: rowItem.id,
      },
    })
    .then((res) => {
      acquisitionParams.value = res.data;

      console.log(acquisitionParams.value, ";;;;;;");
    });
};

// 删除
const handleDelete = (rowItem) => {
  proxy.$modal.confirm("是否确认删除此数据类型？").then(() => {
    return product.collectiontype
      .collectiontypeDeletebatch({
        data: {
          ids: [rowItem.id],
        },
      })
      .then((res) => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      });
  });
};

// 新增类型
const addAcquisition = (rowItem) => {
  dialogVisible.value = true;
  newTitle.value = "新增类型";
  publicFrom.value = {};
};
// 取消
const handelCancel = () => {
  dialogVisible.value = false;
  proxy.resetForm("acquisitionForm");
  publicFrom.value = {};
  // acquisitionParams.value.code=''
  // acquisitionParams.value.name=''
  // acquisitionParams.value.outside=true
  // acquisitionParams.value.description=''
};
// 确定
const handelSure = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      if (Object.keys(publicFrom.value).length) {
        product.collectiontype
          .collectiontypeUpdate({
            pathParams: {
              id: publicFrom.value.id,
            },
            data: acquisitionParams.value,
          })
          .then((res) => {
            if (res.code === 200) {
              handelCancel();
              getList();
              proxy.$modal.msgSuccess("修改成功");
            }
          });
      } else {
        product.collectiontype
          .collectiontypeAdd({
            data: acquisitionParams.value,
          })
          .then((res) => {
            if (res.code === 200) {
              handelCancel();
              getList();
              proxy.$modal.msgSuccess("添加成功");
            }
          });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 外部导入操作关闭
const handleStatusChange = (rowItem) => {};
</script>